<%@page import="org.shop.entity.security.MyUserDetail" %>
<%@page import="org.shop.util.ObjUtil" %>
<%@page import="org.springframework.security.core.context.SecurityContextImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

    SecurityContextImpl securityContextImpl = (SecurityContextImpl) request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
    MyUserDetail ud = null;
    Byte state = 0;
    if (ObjUtil.isNotNullAndEmpty(securityContextImpl)) {
        ud = (MyUserDetail) securityContextImpl.getAuthentication().getPrincipal();
        state = ud.getState();
    }
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1 user-scalable=0">
    <title>论坛</title>
    <link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
    <link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
    <link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="<%=basePath%>assets/js/jquery-2.1.1.min.js"></script>
    <script src="<%=basePath%>assets/js/fontSize.js"></script>
    <link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
	<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
	
    <style>
        body {
            padding-top: 0.8rem;
            padding-bottom: 1.6rem;
            background-color: #eee;
        }

        .header_ul li {
            float: left;
            width: 25%;
        }

        .header_ul li a {
            font-size: 0.28rem;
            height: 0.75rem;
            line-height: 0.8rem;
            padding: 0 0.2rem;
            display: inline-block;
        }

        .title_content i {
            width: 0.26rem;
            height: 0.04rem;
            border-top: 3px solid #FF3F25;
            display: inline-block;
            margin: 0 2px;
        }

        .bbs_details {
            background-color: #fff;
        }

        .business_info {
            padding: 0.2rem;
        }

        .bbs_detail {
            padding: 0 0.2rem;
        }

        .photo {
            width: 0.8rem;
        }

        .photo img {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
        }

        .name{
            font-size: 0.26rem;
        }
        .info {
            line-height: 0.6rem;
        }

        .bbs_introduce {
            line-height: 0.4rem;
            margin: 0.2rem 0;
            font-size: 0.26rem;
        }

        .goods_img img {
            width: 100%;
            margin: 0.05rem 0;
        }

        .time {
            color: #989898;
            font-size: 0.24rem;
        }

        .focus {
            padding: 0.06rem 0.1rem;
            background-color: #FF3F25;
            color: #fff;
            font-size: 0.24rem;
            margin-top: 0.1rem;
        }

        .operation {
            line-height: 0.8rem;
            text-align: right;
            font-size: 0.26rem;
            margin-top: 0.2rem;
        }

        .operation_btn {
            padding:0.1rem;
            position: relative;
            margin-left: 0.1rem;
        }

        .operation_btn i {
            width:0.4rem;
            height:0.4rem;
            display: inline-block;
            position: absolute;
            top:0.04rem;
            background-size: cover;
            margin-right: 0.06rem;
        }
        .operation_btn span{
            margin-left: 0.5rem;
        }
        .favorite_o{
            background-image: url("<%=basePath%>assets/images/favorite.png");
        }
        .active_favorite{
            background-image: url("<%=basePath%>assets/images/active_favorite.png");
        }

        .hot_reply, .all_reply {
            border-bottom: 1px solid #EFEFEF;
            padding: 0 0.2rem;
        }

        .reply_category {
            line-height: 0.8rem;
            font-size: 0.28rem;
            color: #535353;
        }

        .reply_info {
            line-height: 0.36rem;
            margin-top: 0.02rem;
            font-size: 0.26rem;
        }

        .reply_content {
            margin-left: 0.8rem;
            font-size: 0.28rem;
            line-height: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .reply_area {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: #fff;
            width: 100%;
        }

        .reply_photo {
            width: 1rem;
            margin-left: -100%;
            float: left;
        }

        .reply_photo img {
            width: 0.6rem;
            height: 0.6rem;
            margin: 0.1rem;
            border-radius: 50%;
        }

        .reply_input {
            width: 100%;
            float: left;
        }

        .reply_input input {
            width: 100%;
            border: 1px solid #EAEAEA;
            height: 0.5rem;
            background-color: #EEEEEE;
            outline: none;
            text-indent: 0.2rem;
        }

        .reply_btn {
            width: 1rem;
            background-color: #fff;
            border: none;
            outline: none;
            line-height: 0.8rem;
            margin-left: -1rem;
            float: left;
        }
        .inside_div{
            margin:0 1rem;
        }
        .focus_switch {
            padding: 0.06rem 0.1rem;
            font-size: 0.24rem;
            margin-top: 0.1rem;
            line-height: 0.4rem;
            border-radius: 0.4rem;
            margin-right: 0.2rem;
        }
        .focus{
            background-color: #FF3F25;
            color: #fff;
        }

        .already_focus{
            background-color: #F3F1F1;
            color: #333;
        }
    </style>
</head>
<body>
<input id="basePath" type="hidden" value="<%=basePath%>">
<div class="header">
    <a class="returnInfo" href="#" onclick="window.history.go(-1)"><i class="fa fa-angle-left"></i></a>
    论坛
</div>
<div class="bbs_details">
    <div class="bbs">
        <div class="business_info clearFirx">
            <div class="photo float_l">
                <img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${postDetails.userPhoto}" alt="">
            </div>
            <div class="info float_l">
                <span class="name">${postDetails.userName}</span>
            </div>
            <div class="focus float_r focus_switch">
                + 关注
            </div>
        </div>
        <div class="bbs_detail border-bottom-8">
        	
            <p class="bbs_introduce">${postDetails.content}</p>
            <div class="goods_img">
            	<c:forTokens items="${postDetails.contentImg}" delims="," var="imgPath">
	                <img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${imgPath}" alt="">
            	</c:forTokens>
            </div>
        </div>
        <div class="reply_list">
            <div class="hot_reply">
                <p class="reply_category">热门回复</p>
            </div>
            <div class="all_reply">
                <p class="reply_category">全部回复</p>
            </div>
        </div>
    </div>
</div>
<div class="reply_area">
    <div class="reply_input">
        <div class="inside_div">
            <input id="content" type="text" placeholder="评论一下吧~">
        </div>
    </div>
    <div class="reply_photo">
        <img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${postDetails.userPhoto}" alt="">
    </div>
    <button class="reply_btn">发表</button>
</div>
</body>
<script>
	var geting = false;//是否加载信息，默认为false
	var currentPage = 1;//当前页
	var pageSize = 10;//每页数据数
	var senderId = "";
	var sendName = "";
	$(function () {
	    $(".look_more").click(function () {
	        $(".label_box").toggleClass("max_height")
	    })
	    $(".favorite").click(function () {
	        $(this).find("i").toggleClass("favorite_o");
	        $(this).find("i").toggleClass("active_favorite")
	    });
	    
	    //获取热门评论
	    $.ajax({
			url : "<%=basePath%>app/getPostHotAnswerList",
			async:false,
			dataType : "json",
			type : "post",
			data : {
				"postId" : "${postDetails.commentsId}",
				"currentPage" : 1,
				"pageSize" : 5
			},
			success : function(data) {
				$.each(data, function (i, item) {
					var html = '<div class="reply border-bottom-1" onclick="reply($(this),'+item.answerId+','+item.senderId+',\''+item.sendName+'\')">'+
                    	'<div class="user clearFirx">'+
	                        '<div class="photo float_l">'+
	                        	'<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.sendHeadImg+'" alt="">'+
	                        '</div>'+
	                        '<div class="reply_info float_l">'+
	                            '<span class="name">'+item.sendName+'</span><br>'+
	                            '<span class="time">'+item.createDate+'</span>'+
	                        '</div>'+
	                        '<div class="operation float_r">'+
		                        '<span class="operation_btn praise">'
		                            if(<%=state%> == 1 && item.state == 1){
				                    	html+='<i class="active_favorite"></i>'
				                	}else{
				                		html+='<i class="favorite_o"></i>'
				                	}
			                    	html+='<span>'+item.praiseCount+'</span>'+
		                        '</span>'+
		                        '<input name="'+item.answerId+'" type="hidden" value="'+item.answerId+'">'+
	                        '</div>'+
	                    '</div>'
	                    if(item.receiverId == "" || item.receiverId == null){
	                    	html+='<div class="reply_content">'+item.content+'</div>'
	                    }else{
	                    	html+='<div class="reply_content">回复@'+item.receiverName+''+item.content+'</div>'
	                    	
	                    }
                   		html+='</div>'
					$(".hot_reply").append(html);
					geting = false;
				})
			},
			error : function(data) {
				layer.open({
    			    content: '网络出现了异常，请稍等~'
    			    ,skin: 'msg'
    			    ,time: 2 //2秒后自动关闭
   			  	})
			}
		})
	    
		getData();
	    
	    $(window).scroll(function () {
			if (geting) {
	        	return;
	        }
	        var scrollTop = $(this).scrollTop();
	        var scrollHeight = $(document).height();
	        var windowHeight = $(this).height();
	        if (scrollTop + windowHeight == scrollHeight) {
	        	currentPage++;
	            getData();
	        }

	    });
	    
	  	//赞||取消赞
		$('.praise').click(function () {
			if("<%=securityContextImpl%>" == "null"){
	    		window.location.href = "<%=basePath%>app/appLogin2";
	    		return;
	    	}
			
			var state = 1;
			var targetId = $(this).siblings('input').val();
	    	$.ajax({
		    	url: "<%=basePath%>app/addPraise",
		    	async:false,
		        type: 'post',
		        data: {"postId":"${postDetails.commentsId}","targetId":targetId,"praiseType":2},
		        dataType: 'json',
		        success: function (data) {
		        	if(data.state==1){
		        		state = 1;
		        	}
    	        },error:function (){
    	        }
			});
	    	
	    	if(state == 1){
	    		if($(this).find("i").attr("class") == "active_favorite"){
// 		    		$(this).find('span').html(Number($(this).find('span').text()) - 1);
		    		$("input[name='"+targetId+"']").siblings(".praise").find('span').html(Number($(this).find('span').text()) - 1);
	    		}else{
// 		    		$(this).find('span').html(Number($(this).find('span').text()) + 1);
		    		$("input[name='"+targetId+"']").siblings(".praise").find('span').html(Number($(this).find('span').text()) + 1);
	    		}
// 	    		$(this).find("i").toggleClass("favorite_o");
// 		        $(this).find("i").toggleClass("active_favorite");
	    		$("input[name='"+targetId+"']").siblings(".praise").find("i").toggleClass("favorite_o");
	    		$("input[name='"+targetId+"']").siblings(".praise").find("i").toggleClass("active_favorite");
    		}
		});
	  
		//发表评论
	  	$(".reply_btn").click(function () {
	  		if("<%=securityContextImpl%>" == "null"){
	    		window.location.href = "<%=basePath%>app/appLogin2";
	    		return;
	    	}
	  		if($("#content").val() == ""){
	  			layer.open({
				    content: '请输入内容'
				    ,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
				})
	  			return false;
	  		}
	  		var datas = "";
	  		var contentStr="";
	  		if(senderId == ""){
	  			datas = {
	  				"content":$("#content").val(),
				   	"postId":"${postDetails.commentsId}"
	  			}
	  			contentStr = $("#content").val();
	  		}else{
	  			datas = {
  					"content":$("#content").val(),
  					"postId":"${postDetails.commentsId}",
  					"receiverId":senderId,
  					"receiverName":sendName
	  			}
	  			contentStr = '回复@'+sendName+":"+$("#content").val();
	  		}
	  		$.ajax({
		   		url: "<%=basePath%>app/addPostReply",
		   		async:false,
			   	type: 'post',
			   	data: datas,
			   	dataType: 'json',
			   	success: function (data) {
				   	if(data.state==1){
				   		layer.open({
						    content: '留言成功~'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						})
		   				
				   		var html = '<div class="reply border-bottom-1">'+
	                    	'<div class="user clearFirx">'+
		                        '<div class="photo float_l">'+
		                        	'<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${userInfo.userPhoto}" alt="">'+
		                        '</div>'+
		                        '<div class="reply_info float_l">'+
		                            '<span class="name">${userInfo.userName}</span><br>'+
		                            '<span class="time">刚刚</span>'+
		                        '</div>'+
		                        '<div class="operation float_r">'+
		                            '<span class="operation_btn praise">'+
		                                '<i class="favorite_o"></i>'+
		                                '<span>0</span>'+
		                            '</span>'+
// 		                            '<input name="'+item.answerId+'" type="hidden" value="'+item.answerId+'">'+
		                        '</div>'+
		                    '</div>'+
		                    '<div class="reply_content">'+contentStr+'</div>'+
	                	'</div>'
						$(".all_reply").append(html);
						$('#content').val("");
				   		$('#content').attr('placeholder',"评论一下吧~");
				   		senderId = "";
				   		sendName = "";
		        	}else{
		        		layer.open({
		    			    content: '留言失败~',
		    			    skin: 'msg',
		    			    time: 2 //2秒后自动关闭
		   				})
		       		}
	        	},error:function (){
		        	layer.open({
	    			    content: '网络出现了异常，请稍等~'
	    			    ,skin: 'msg'
	    			    ,time: 2 //2秒后自动关闭
	   			  	})
		        }
			})
	  	})
	    
	})
    $(".focus_switch").click(function(){
        $(this).toggleClass("focus already_focus");
        if($(this).hasClass("already_focus")){
            $(this).text("已关注")
        }else{
            $(this).text("+ 关注")
        }
    });
	
	//获取所有评论
	function getData() {
		geting = true;
		$.ajax({
			url : "<%=basePath%>app/getAnswerList",
			async:false,
			dataType : "json",
			type : "post",
			data : {
				"postId" : "${postDetails.commentsId}",
				"currentPage" : currentPage,
				"pageSize" : pageSize
			},
			success : function(data) {
				$.each(data, function (i, item) {
					var html = '<div class="reply border-bottom-1">'+
                    	'<div class="user clearFirx">'+
	                        '<div class="photo float_l">'+
	                        	'<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.sendHeadImg+'" alt="">'+
	                        '</div>'+
	                        '<div class="reply_info float_l">'+
	                            '<span class="name">'+item.sendName+'</span><br>'+
	                            '<span class="time">'+item.createDate+'</span>'+
	                        '</div>'+
	                        '<div class="operation float_r">'+
	                            '<span class="operation_btn praise">'
	                                if(<%=state%> == 1 && item.state == 1){
				                    	html+='<i class="active_favorite"></i>'
				                	}else{
				                		html+='<i class="favorite_o"></i>'
				                	}
			                    	html+='<span>'+item.praiseCount+'</span>'+
	                            '</span>'+
	                            '<input name="'+item.answerId+'" type="hidden" value="'+item.answerId+'">'+
	                        '</div>'+
	                    '</div>'
	                    if(item.receiverId == "" || item.receiverId == null){
	                    	html+='<div class="reply_content" onclick="reply($(this),'+item.answerId+','+item.senderId+',\''+item.sendName+'\')">'+item.content+'</div>'
	                    }else{
	                    	html+='<div class="reply_content" onclick="reply($(this),'+item.answerId+','+item.senderId+',\''+item.sendName+'\')">回复@'+item.receiverName+''+item.content+'</div>'
	                    	
	                    }
                   		html+='</div>'
					$(".all_reply").append(html);
					geting = false;
				})
			},
			error : function(data) {
				alert("网络错误");
			}
		})
	}
	
	function reply(obj,aId,sId,sName){
		answerId = aId;
		senderId = sId;
		sendName = sName;
		if("<%=securityContextImpl%>" == "null"){
    		window.location.href = "<%=basePath%>app/appLogin2";
     		return;
     	}
		if("${userInfo.userId}" == senderId){
			//询问框
		  	layer.open({
		    	content: '确认删除该评论吗？',
		    	btn: ['确定', '取消'],
		    	yes: function(index){
		    		obj.parent().remove();
		    		$.ajax({
			 	    	url: "<%=basePath%>app/delAnswer",
		   		 	        timeout: 300000,
		   		 	        dataType: "json",
		   		 	        type: "post",
		   		 	        data: {
		   		 	        	"answerId":aId
		   		 	        },success : function(data) {
		        	        	layer.open({
		        				    content: '删除成功！',
		        				    skin: 'msg',
		        				    time: 2 //2秒后自动关闭
		        				  })
		   		 	        },error : function() {
	   		 	        		layer.open({
	   		 	    		    content: '网络异常,请稍后再试~'
	   		 	    		    ,skin: 'msg'
	   		 	    		    ,time: 2 //2秒后自动关闭
	   		 	    		  })
	   		 	        }
	   		 	    })
  		    	}
  		  	})
		}else{
			$("#content").focus();
			$('#content').attr('placeholder',"回复:"+sName);
		}

	}
</script>
</html>